<template>
	<view class="content">
		<view class="flex-box">
			<view class="flex-left">
				<picker @change="bindPicker1Change" :range="dateTypeList" range-key="itemName">	
					<label class="picker-title">统计时间:</label>
					<label class="picker-value">{{dateTypeList[selDate].itemName}}</label>		
				</picker>
			</view>
			<view class="flex-right">
				<picker @change="bindPicker2Change" :range="dataTypeList" range-key="itemName">
					<label class="picker-title">统计类型:</label>
					<label class="picker-value">{{dataTypeList[selData].itemName}}</label>		
				</picker>
			</view>
		</view>
		
		<view class="list-box">
			<view class="list" v-for="(item,index) in pageResult.list" :key="index" @click="jump(item.jumpType, item.jumpLink)">
				<view class="list-title"> {{item.date}} </view>
				<view class="list-num"> {{item.data}} </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	var _self;
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	export default {
		data() {
			return {
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					itemId: 0,
					dataType: '',
                    dateType: '',
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				},
                dateTypeList : [],
                dataTypeList: [],
				selDate: 0,
				selData: 0,
			}
		},
		methods: {
			getList(){
				uni.showLoading({
					title: '加载中···',
					mask: true
				});
				_self.pageParam.page++
				serve.request({
					url: '/spread/index/list',
					data: _self.pageParam
				}).then(res => {
					console.log(res.data); 
					if (res.data && res.data.length > 0) {
						_self.pageResult.list=_self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0; 
					uni.hideLoading();
				});
			},
            getSearchList() {
                serve.request({
                	url: '/spread/index/search-list',
                	data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                    }
                }).then(res => {
                	_self.dateTypeList = res.data.dateList;
                    _self.dateTypeList.forEach((v, k) => {
                        if(_self.pageParam.dateType == v.itemId) {
                            _self.selDate = k;
                        }
                    });
                	_self.dataTypeList = res.data.dataList;
                    _self.dataTypeList.forEach((v, k) => {
                        if(_self.pageParam.dataType == v.itemId) {
                            _self.selData = k;
                        }
                    });
                    _self.getList();
                    _self.$forceUpdate();
                });
            },
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			},
			//下拉框，统计时间
			bindPicker1Change: function(e) {
				_self.selDate = e.target.value;
				let item = _self.dateTypeList[_self.selDate];
				_self.pageParam.dateType = item.itemId;
				_self.pageParam.page=0;
				_self.pageResult.list=[];
				_self.getList();
			},
			//下拉框，统计类型
			bindPicker2Change: function(e) {		
				_self.selData = e.target.value;
				let item = _self.dataTypeList[_self.selData];
				_self.pageParam.dataType = item.itemId;
				_self.pageParam.page=0;
				_self.pageResult.list=[];
				_self.getList();
			},

		},
		onLoad(options) {
			_self = this;
			_self.pageParam.itemId = options.itemId || 0;
			_self.pageParam.dataType = options.dataType || 'visit';
			_self.pageParam.dateType = options.dateType || 'day';
			if(_self.pageParam.itemId == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon : 'none',
					success:function(){ 
						setTimeout(function () { 
							common.jump('return_one')
						}, 2000) 
					} 
				});
				return;
			}
            _self.getSearchList();
			// _self.getList();
		},
		onPullDownRefresh() {
			_self.pageParam.page=0;
			_self.pageResult.list=[];
			_self.getList();
		},
		onReachBottom() {
			if(_self.pageResult.isEnd ||_self.pageResult.isEmpty){
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped>
	page, .content{
		width: 100vw;
		height: auto;
		background: #fff;
		color: #333;
	}
	.flex-box{
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 88rpx;
		background: #fff;
		display: flex;
		justify-items: center;
		align-items: center;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		
	}
	.flex-left{
		flex: 5;
		text-align: center;
	}
	.picker-title{
		font-size: 30rpx;
	}
	.picker-value{
		font-size: 26rpx;
		margin-left: 20rpx;
		border: 2rpx solid #e2e2e2;
		border-radius: 8rpx;
		padding: 8rpx 12rpx;
		width: 222rpx;
	}
	.flex-right{
		flex: 5;
		text-align: center;
	}
	.list-box{
		margin-top: 88rpx;
		padding: 20rpx 30rpx;
		
	}
	.list{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid #e2e2e2;
		padding: 40rpx 10rpx;
	}
	.list-title{
		font-size: 36rpx;
		color: #6b6b6b;
	}
	.list-num{
		color: #de9595;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	
	
</style>
